<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>跳绳管理</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/dist/css/skins/skin-blue.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!-- Main Header -->
  <%- include('./header.ejs') %>
  <!-- Left side column. contains the logo and sidebar -->
  <%- include('./menu.ejs') %>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        跳绳管理
        <small>每天跳绳的个数都在这里....</small>
      </h1>
    </section>

    <!-- Main content -->
    <section class="content">

            <div class="box">
                    <div class="box-header">
                      <form class="form-inline" action="/pushup/add" method="get" style="float: left;">
                        <div class="form-group">
                          <label class="sr-only" for="username">username</label>
                          <input type="text" class="form-control" name="username" id="username" placeholder="名字">
                        </div>
                        <div class="form-group">
                          <label class="sr-only" for="run">Password</label>
                          <input type="number" class="form-control" name="run" id="run" placeholder="个数">
                        </div>
                        <button type="submit" class="btn btn-info btn-sm">添加记录</button>
                        <a href="/pushup/updateMany?num=10">
                          <button type="button" class="btn btn-success btn-sm">+10</button></a>
                          <a href="/pushup/updateMany?num=-10">
                            <button type="button" class="btn btn-success btn-sm">-10</button></a>
                      </form>
                      <form class="form-inline" style="float: left;margin-left:12px;" action="/pushup/search" method="get">
                        <div class="form-group">
                          <label class="sr-only" for="username">username</label>
                          <input type="text" class="form-control" name="username" id="username" placeholder="搜索名字">
                        </div>
                        <button type="submit" class="btn btn-info btn-sm">搜索</button>
                      </form>
                      <ul style="float: left;list-style:none" >
                        <% for(var item of kind) { %>
                          <li style="display: inline-block" class="btn btn-info btn-sm">
                            <a href="/pushup/run?num=<%= item %>" style="color:white"> <%= item %> </a>
                          </li>
                        <% } %>
                      </ul>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body no-padding">
                      <table class="table table-striped table table-bordered table table-striped text-center">
                        <tbody><tr>
                            <td class="text-center">
                                <div class="checkbox">
                                    <label>
                                      <input type="checkbox" >
                                    </label>
                                  </div>
                            </td>
                          <th>序号</th>
                          <th>姓名</th>
                          <th>数量</th>
                          <th>操作</th>
                        </tr>
                        <% for (var i = 0; i< result.length; i++) { %>
                          <% if( result[i].run > 80 ) { %>
                        <tr style="background:#ccc">
                            <td class="text-center">
                                <div class="checkbox">
                                    <label>
                                      <input type="checkbox">
                                    </label>
                                  </div>
                            </td>
                          <td><%= i %></td>
                         
                          <td> <a href="/pushup/detail?username=<%= result[i].username %>"><%= result[i].username %></a></td>
                          <td id="test<%= i %>"><%= result[i].run %></td>
                          <td> <button class="btn btn-warning btn-xs" onclick="edit('<%= i %>', '<%= result[i].username %>', '<%= result[i].run %>')">编辑</button> 
                            <a href="/pushup/delete?username=<%= result[i].username %>"><button class="btn btn-success btn btn-primary btn-xs">删除</button></a>
                          </td>
                        </tr>
                        <% } else { %>
                          <tr>
                              <td class="text-center">
                                  <div class="checkbox">
                                      <label>
                                        <input type="checkbox">
                                      </label>
                                    </div>
                              </td>
                            <td><%= i %></td>
                            <td> <a href="/pushup/detail?username=<%= result[i].username %>"><%= result[i].username %></a></td>
                            <td id="test<%= i %>"><%= result[i].run %></td>
                            <td> <button class="btn btn-warning btn-xs" onclick="edit('<%= i %>', '<%= result[i].username %>', '<%= result[i].run %>')">编辑</button> 
                              <a href="/pushup/delete?username=<%= result[i].username %>"><button class="btn btn-success btn btn-primary btn-xs">删除</button></a>
                            </td>
                          </tr>
                          <% } %>
                        <% } %>
                      </tbody></table>
                      <nav aria-label="...">
                        <ul class="pager">
                          <li><a href="javascript:void(0)" onclick="prevPage('<%= pageCode %>')">上一页</a></li>
                          <li><a href="javascript:void(0)" onclick="nextPage('<%= pageCode %>')">下一页</a></li>
                        </ul>
                      </nav>
                    </div>
                    <!-- /.box-body -->
                  </div>

    </section>
    <!-- /.content -->
  </div>
 

  <!-- Control Sidebar -->
  <footer class="main-footer">
      <!-- To the right -->
      <div class="pull-right hidden-xs">
        Anything you want
      </div>
      <!-- Default to the left -->
      <strong>Copyright &copy; 2016 <a href="#">Company</a>.</strong> All rights reserved.
    </footer>
  
    <div class="control-sidebar-bg"></div>
  </div>

  <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/dist/js/app.min.js"></script>
<script type="text/javascript">
  function edit (index, username, run) {
    // console.log(username, index)
    $('#test' + index).html(`
      <input type="number" name="run" id="run${index}" value="${run}" />
      <button id="btn${index}" class="btn btn-danger btn-xs" >确定</button>
      <button id="clear${index}" class="btn btn-warning btn-xs" >清空</button>`)

    $("#btn" + index).on('click', function () {
      console.log(username, index)
      var runNum = $('#run' + index).val();
      window.location.href = `/pushup/updateOne?username=${username}&run=${runNum}`;
    })
    $("#clear" + index).on('click', function () {
      window.location.href = `/pushup/updateOne?username=${username}&run=0`;
    })
  }

   function prevPage (pageCode) {
    pageCode--;
    window.location.href = `/pushup/paging?limitNum=10&pageCode=${pageCode}`
  }

  function nextPage (pageCode) {
    pageCode++;
    window.location.href = `/pushup/paging?limitNum=10&pageCode=${pageCode}`
  }
</script>
</body>
</html>
